<template>
  <div class="home">
		<yd-navbar title="首页" height="40px"></yd-navbar>
     <div class="swipers">
			 <yd-slider autoplay="5000">
			 		<yd-slider-item v-for="(item,index) in swiper" :key="index">
			 				<img :src="item.img" >
			 		</yd-slider-item>
			 </yd-slider>
		 </div>
		 <div class="grid">
			 <div class="grid-item" v-for="(item,index) in grid" :key="index">
				 <yd-icon :name="item.name" size="1.54rem" :color="item.color"></yd-icon>
				 <h3>{{item.title}}</h3>
			 </div>
		 </div>
		 <div class="tabs">
			 <yd-tab height="40px">
					 <yd-tab-panel label="文章">1</yd-tab-panel>
					 <yd-tab-panel label="海报">2</yd-tab-panel>
					 <yd-tab-panel label="视频">3</yd-tab-panel>
					 <yd-tab-panel label="招聘">4</yd-tab-panel>
					 <yd-tab-panel label="活动">5</yd-tab-panel>
					 <yd-tab-panel label="简历">6</yd-tab-panel>
			 </yd-tab>
		 </div>
  </div>
</template>   

<script>
export default {
  name: 'Home',
	data(){
		return{
			swiper:[
				{id:1,img:"https://img1.baidu.com/it/u=862895180,3678245461&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360"},
				{id:2,img:"https://img1.baidu.com/it/u=862895180,3678245461&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360"},
				{id:3,img:"https://img1.baidu.com/it/u=862895180,3678245461&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360"}
			],
			grid:[
				{id:1,name:"home",color:"#FF685D",title:"文章"},
				{id:2,name:"tencent-weibo",color:"#514fc1",title:"海报"},
				{id:3,name:"weixin",color:"#24ca22",title:"视频"},
				{id:4,name:"weibo",color:"#c7ca22",title:"招聘"},
				{id:5,name:"qq",color:"#ff0000",title:"活动"},
				{id:6,name:"prev",color:"#0c343d",title:"简历"}
			],
		}
	},
}
</script>

<style lang="less" scoped>
.yd-navbar{
	position: fixed;
	width: 100%;
	top: 0;
}
.swipers{
	margin-top: 30px;
	width: 100%;
	height: 190px;
  padding: 12px;
	background-color: #fff;
	img{
		border-radius: 0.5em;
	}
}
.tabs{
	padding: 0.1px 5px;
}
.grid{
	display: flex;
	display: -webkit-flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 5px;
	background-color: #fff;
	.grid-item{
		width: 33.3%;
		height: 65px;
		text-align: center;
		i{
			display: block;
			margin-top: 5px;
		}
		h3{
			margin-top: 1px;
		}
	}
}
</style>

